collapsibleHeader Attribute |
This attribute comprises a reference to the ID of a self-defined header node. You can use this option attribute to create your own header. If this attribute is not defined, the Collapsible element creates its own header just in front of the collapsible node.
Syntax
| html |
<div id="myHeader">
<div id=" leftCaptionId">leftHeader caption</div>
<div id=" rightCaptionId">rightHeader caption</div>
</div>
<div id="collapId" class="collapsible"
collapsibleHeader="myHeader"
leftCaption="leftCaptionId"
rightCaption="rightCaptionId">
...
</div>
|
Parameters
| collapsibleHeader | Optional. Refers to the ID of the header node. |
| leftCaption | Optional. Refers to the ID of the leftCaption node. |
| rightCaption | Optional. Refers to the ID of the rightCaption node. |
Remarks
The self-defined header must be positioned outside the collapsible itself. Refer to the example below.
Example
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>collapsibleHeader</title>
<script type="text/javascript" src="/cordys/wcp/application.js"></script>
<style type="text/css">
.myHeader
{
border:1px solid ridge;
background-color:steelBlue;
font-size:12px;
}
.myHeader div
{
display:inline;
width:55%;
}
</style>
</head>
<body>
<h2>CollapsibleHeader test page</h2>
<div style="width:500px;">
<div id="myHeaderId" class="myHeader">
<div id="leftHeaderId">leftHeader caption</div>
<div id="rightHeaderId">rightHeader caption</div>
</div>
<div id="collap02"
class="collapsible"
collapsibleHeader="myHeaderId"
leftCaption="leftHeaderId"
rightCaption="rightHeaderId"
expanded="true"
style="border:1px solid lightBlue;font-size:12px;" >
<div>sample 2</div>
<div>sample 3</div>
<div>sample 4</div>
</div>
</div>
</body>
</html>